<template>
	<view>
		<view class="container">
			<u-navbar
				@rightClick="rightClick"
				:autoBack="true"
				rightText="搜索"
			>
				<view slot="center" class="search">
					<u-search placeholder="日照香炉生紫烟" 
					v-model="keyword"
					:focus="true"
					:showAction="false"
					:clearabled="false"
					@search="rightClick"
					></u-search>
				</view>
			</u-navbar>
		</view>
		<view class="line">
		</view>
		<view class="search-history" v-if="historyList.length > 0">
			<view class="history-title">
				<view class="history-text">
					历史记录
				</view>
				<view @click="removeHistory">
					<u-icon name="trash"></u-icon>
				</view>
			</view>
			<view class="history-list">
				<view class=""
				v-for="(item,index) in historyList"
				:key="index"
				@click="rightClick(item)"
				>
					{{item}}
				</view>
			</view>
		</view>
		<view class="search-hot">
			<view class="hot-title">
				<u-icon name="search" size="22"></u-icon>
				<view class="hot-text">
					热门搜索
				</view>
			</view>
			<view class="hot-list">
				<view
				v-for="(item,index) in hotList"
				:key="item.id"
				@click="rightClick(item.keywords)"
				style="display: flex;"
				>
					{{item.keywords}}
					<u-icon name="photo" v-if="index==0 || index==1"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getHotKeywords} from '@/api/search.js'
	export default {
		data() {
			return {
				keyword:'',
				historyList: [],
				hotList: []
			}
		},
		onLoad() {
			getHotKeywords().then(res=>{
				this.hotList = res.list 
			})
		},
		onShow(){
			this.historyList = JSON.parse(uni.getStorageSync('historySearch'))
		},
		methods: {
			rightClick(key){
				let k = this.keyword || key
				
				if(!k) return
				let index = this.historyList.indexOf(k)
				if(index < 0){
					this.historyList.unshift(k)
					uni.setStorageSync('historySearch',JSON.stringify(this.historyList))
				}else{
					this.historyList.unshift(this.historyList.splice(index,1)[0])
					uni.setStorageSync('historySearch',JSON.stringify(this.historyList))
				}
				uni.navigateTo({  
					url:`/pages/search/search-list?key=${k}`
				})
				
			},
			removeHistory(){
				let that = this
				uni.showModal({
					title:'确定要删除吗',
					success: function(e){
						if(e.confirm){
							that.historyList = []
							uni.setStorageSync('historySearch',JSON.stringify([]))
						}
					}
				})
			}
		}
	}
</script>

<style>
.search{
	width: 527rpx;
	/* height: 66rpx; */
}
/deep/ .u-search__content{
	padding: 6rpx 20rpx	;
}
/* .nav-bar{
	border-bottom: 1px solid #ccc;
} */
.line{
	width: 100%;
	height: 1rpx;
	background: rgba(241, 241, 241, 0.39);
	border: 1rpx solid #DCDCDC;
	margin-top: 120rpx;
}
.search-history{
	padding: 33rpx;
}
.history-title{
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
}
.history-list{
	display: flex;
	flex-wrap: wrap;
	padding: 33rpx;
}
.history-list > view{
	padding: 5rpx 10rpx;
	background-color: #e6e6e6;
	margin: 10rpx 0;
	border-radius: 5rpx;
	font-size: 24rpx;
}
.history-list > view:nth-child(2n){
	margin-left: 30rpx;
	margin-right: 30rpx;
}
.history-text{
	font-size: 26rpx;
	font-weight: bold;
	color: #636363;
}
.search-hot{
	margin-top: 30rpx;
	padding: 33rpx;
	/* padding-top: 100rpx; */
}
.hot-title{
	display: flex;
	padding-bottom: 33rpx;
	border-bottom: 1px solid #ccc;
}
.hot-list{
	display: flex;
	flex-wrap: wrap;
	/* padding: 33rpx; */
}
.hot-list > view{
	width: 50%;
	padding-top: 33rpx;
	font-size: 29rpx;
	font-weight: 400;
	color: #333333;
}
</style>
